<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>员工工作情况展示</title>
    <link rel="stylesheet" href="/css/xark/style.css">
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div class="grey_bg_outside_box">
    <a href="/staffWorkSituation">
        <button type="button" class="btn btn-primary">
            <i class="fa fa-align-center"></i> &nbsp; 更新该员工工作情况
        </button>
    </a>
    <div class="main_content_box">

        <div class="legal_entity_status height-auto mt20">
            <div class="legal_entity_status_chart whole_box">
                <div class="chart_content_tip">
                    <span class="fl mr20">员工工作情况展示</span>
                    <span class="pos-rel flex-1"><i class="icon-mark"></i>
                    <span class="tips-mark new2">统计了该员工每个月的工作绩效。</span></span>
                    <select class="chooseQuarter" id="chooseQuarter3">
                        <option value="">2020年</option>
                    </select>
                    <!--  <select class="chooseWeek" id="chooseWeek3">
                          <option value="">所有星期</option>,
                      </select>-->

                </div>

                <div class="col-lg-6 white_shd">
                    <div id="testCharts" style="width: 1030px;height:400px;"></div>
                </div>
                <!--                <div class="status_chart_container h410" id="main"></div>-->

                <!--                <div class="col-lg-6 white_shd">-->
                <!--                    <div id="testCharts" style="width: 550px;height:400px;"></div>-->
                <!--                </div>-->

            </div>
        </div>

    </div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('testCharts'));
    var kpi = [];
    var list = [[${kpis}]];

    for (let i = 0; i < list.length; i++) {
        kpi.push(list[i]);
    }
    var option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: "kpi",
            data: kpi,
            type: 'line'
        }]
    };

    myChart.setOption(option);

</script>

</body>
</html>
